import { useState, useEffect } from 'react'

export default function MaxLenInput(props) {
    const {
        defaultValue='', 
        maxLength
    } = props
    
    const {
        onChange
    } = props

    const [curLen, setCurLen] = useState(0);
    const [value, setValue] = useState(defaultValue);
    useEffect(() => {
        setCurLen(value.length)
    },[value])
    const inputChange = (event) => {
        let curValue = event.target.value
        if(curValue.length >= maxLength) {
            return ;
        }
        onChange(value, event)
        // setCurLen(value.length);
        setValue(curValue);
    }

    return (
        <div className="wrapper">
            <input type="text" value={value} onChange={inputChange}/>
            <div className="len_container">{curLen}/{maxLength}</div>
        </div>
    )
}
